<template>
  <view class="container">
    <view class="message-list">
      <view
        v-for="(item, index) in messageList"
        :key="index"
        class="message-item"
        @click="navigateToPath(item)"
      >
        <view class="message-icon" :style="{ backgroundColor: item.color }">
          <u-icon :name="item.icon" color="#FFFFFF" size="24"></u-icon>
        </view>
        <view class="message-content">
          <text class="message-title">{{ item.title }}</text>
          <u-icon name="arrow-right" color="#C8C9CC" size="16"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      messageList: [
        {
          title: "证件有效期到期提醒",
          icon: "file-text",
          color: "#2979FF",
          path: "/pages/hub_zsyg/message/certificate",
        },
        {
          title: "人员证件到期未换证",
          icon: "account",
          color: "#FF9900",
          path: "/pages/hub_zsyg/message/Personnelexpried",
        },
        {
          title: "人员诚信考核到期提醒",
          icon: "edit-pen",
          color: "#9C27B0",
          path: "/pages/hub_zsyg/message/Personnelexpried",
        },
        {
          title: "人员记满20分提醒",
          icon: "checkmark-circle",
          color: "#4CAF50",
          path: "/pages/hub_zsyg/message/Personnelexpried",
        },
        {
          title: "车辆年审到期提醒",
          icon: "warning",
          color: "#FF5722",
          path: "/pages/hub_zsyg/message/annualexpried",
        },
        {
          title: "车辆技术等级评定到期",
          icon: "clock",
          color: "#FF9900",
          path: "/pages/hub_zsyg/message/carexpires",
        },
        {
          title: "车辆年审申请进度提醒",
          icon: "star",
          color: "#9C27B0",
          path: "/pages/hub_zsyg/message/carvehicle",
        },
      ],
    };
  },
  methods: {
    // 可以添加点击事件处理方法
    navigateToPath(item) {
      uni.navigateTo({
        url: item.path,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f3f6fa;
  min-height: 100vh;
  width: 100%;
  box-sizing: border-box;
}

.message-list {
  padding: 20rpx;
}

.message-item {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  margin-bottom: 2rpx;
  padding: 28rpx 20rpx;
  &:first-child {
    border-radius: 20rpx 20rpx 0 0;
  }

  &:last-child {
    border-radius: 0 0 20rpx 20rpx;
  }
}

.message-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20rpx;
}

.message-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.message-title {
  font-size: 28rpx;
  color: #333333;
}
</style>
